<template>
  <AdVxeModal
    v-bind="$attrs"
    @register="register"
    :id="formIndex"
    :title="t('iot.route.state.variable.title')"
    :cancel-text="t('common.cancelText')"
    :close-func="handleClose"
    :ok-text="t('common.okText')"
    @ok="handleOk"
    width="70%"
    height="70%"
    min-height="50%"
  >
    <VariableStateTable :id="formIndex" :search-info="searchInfo" :hide-cols="hideCols" />
  </AdVxeModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  import { AdVxeModal, useModalInner } from '@/components/AdVxeModal';
  import { useI18n } from '@/hooks/web/useI18n';
  import VariableStateTable from '@/views/iot/state/variable/table.vue';

  import { FilterGroup } from '#/request';

  defineOptions({ name: 'VariableStateModal' });

  const { t } = useI18n();
  const formIndex = 'iot-state-variable-modal';

  const searchInfo = ref<FilterGroup>();
  const hideCols = ref<string[]>(['DeviceId', 'DeviceName', 'VariableId', 'VariableName']);

  const [register, { closeModal, changeLoading }] = useModalInner(async (data) => {
    changeLoading(true);
    try {
      if (data?.searchInfo) {
        searchInfo.value = data?.searchInfo;
      } else {
        searchInfo.value = undefined;
      }
    } finally {
      changeLoading(false);
    }
  });

  /** 处理关闭按钮 */
  async function handleClose() {
    return true;
  }
  /** 处理确定按钮 */
  async function handleOk() {
    closeModal();
  }
</script>
<style lang="scss" scoped></style>
